<template>
  <div id="ios">
    <div class="download-bg"></div>
    <div class="ios-main">
      <div class="big-title"></div>
      <div class="ball-bg"></div>
      <div class="ios-pic"></div>
      <p class="dl-tip1 word-style-PingFangSC">BiPlus App 下载</p>
      <p class="dl-tip2 word-style-PingFangSC">专业&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;稳定&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;安全</p>
      <span class="downBtn" @click="upload()">立即下载</span>
      <span class="finTip">点击安装后，请返回桌面查看</span>
      <p style="padding-bottom:100px;margin-top:48px;color:#999999">© Copyrights  2019 BiPlus 版权所有</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return{
    }
  },
  mounted() {
    
  },
  methods:{
          upload(){
              if (navigator.userAgent.match(/android/i)) {
        //  window.open("sellingworldapp://");//android app协议
          window.setTimeout(function () {
            window.location.href = "https://www.biplus.vip/upload/html/app/biplus.apk";// 下载地址
          }, 2000)
        }
          }
    }
}
</script>

<style lang="less" scoped>

  .download-bg{
    width: 100%;
    height:796px;
  }
 .load{
        background: #fff
  }
  #ios{
      background: #fff;
      height: 130%;

  }
  .ball-bg{
    width: 628px;
    height: 386px;
    background: url('https://www.biplus.vip/upload/html/ball-bg.png') no-repeat;
    position: absolute;
    top: 218px;
    left: 30px;
    z-index: 100;
  }
  .ios-pic{
    width: 478px;
    height: 444px;
    position: absolute;
    top: 290px;
    left: 138px;
    background: url('https://www.biplus.vip/upload/html/ios-pic.png') no-repeat;
  }
  .big-title{
    width: 502px;
    height: 62px;
    position: absolute;
    background: url('https://www.biplus.vip/upload/html/big-title.png') no-repeat;
    top: 120px;
    left: 124px;
  }
  .ios-main{
    text-align: center;
  }
  .ios-main .dl-title{
    position: relative;
    margin-top: 16px;
  }
  .adorn-ball{
    position: absolute;
    top: 50px;
    left: 240px;
  }
  .ios-main .dl-secTitle{
    margin-top: 36px;
    font-size: 32px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color: #454545;
  }
  .animation{
    height: 294px;
  }
  #main-circle{
    border-radius: 50%;
    margin: 60px auto;
    height: 260px;
    width: 260px;
    position: relative;
  }
  #main-circle .logo{
    width: 176px;
    height: 176px;
    position: absolute;
    top: 41px;
    left: 42px;
    border-radius: 0;
  }
  .big-circle1{
    animation:identifier 3s linear infinite;
  }
  .big-circle2{
    animation: go 6s linear infinite;
  }
  .big-circle3{
    animation:identifier 2s linear infinite;
  }
  #main-circle>div{
    width: 260px;
    height: 260px;
    border-radius: 50%;
    position: absolute;
  }
  #ball1{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    background: blue;
    left: 110px;
    top: -20px;
  }
  #ball2{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    background-color: yellowgreen;
    left: 110px;
    top: 240px;
    animation:ball2 6s linear infinite;
  }
  #ball3{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    background: rgb(243, 31, 31);
    left: 110px;
    top: -20px;
    animation: ball3 6s linear infinite;
  }
  .word-style-PingFangSC{
    font-family:PingFangSC-Semibold,PingFang SC;
    font-weight:600;
  }
  .dl-tip1{
    font-size:32px;
    color: #454545;
    margin-bottom: 10px;
    line-height: 44px;
  }
  .dl-tip2{
    font-size:24px;
    font-weight:400;
    color: #999999;
    line-height: 34px;
  }
  .downBtn{
    width:600px;
    height:88px;
    background:#0F2F8F;
    border-radius:10px;
    margin-top: 40px;
    color:#FFFFFF;
    line-height: 88px;
    letter-spacing: 1px;
  }
  .finTip{
    margin-top: 20px;
  }
  .dl-tip3{
    margin-top: 100px;
    font-size:32px;
  }
  .step-tip{
    font-size:32px;
    color: #333333;
    line-height:44px;
    margin-left: 40px;
    margin-bottom: 20px;
  }
  @keyframes identifier {
    from {
      transform: rotate(0deg)
    }
    to {
      transform: rotate(360deg)
    }
  }
  @keyframes go{
    0% {transform: rotate(0deg)}
    23%{
      transform: rotate(331.2deg);
    }
    25% {transform: rotate(360deg)}
    50% {transform: rotate(720deg)}
    75% {transform: rotate(1080deg)}
    100% {
      transform: rotate(1440deg);
    }
  }
  @keyframes ball2 {
    0% {
      width: 40px;
    }
    20% {
      width: 40px;
    }
    22%{
      width: 40px;
      left: 110px;
      opacity: 1;
    }
    25% {
      width: 60px;
      left: 100px;
      opacity: .7;
    }
    28% {
      width: 40px;
      left: 110px;
      opacity: 1;
    }
    47% {
      width: 40px;
      left: 100px;
      opacity: 1;
    }
    50% {
      width: 60px;
      left: 100px;
      opacity: .7;
    }
    53% {
      width: 40px;
      left: 110px; 
      opacity: 1;
    }
    72% {
      width: 40px;
      left: 100px;
      opacity: 1;
    }
    75% {
      width: 60px;
      left: 100px;
      opacity: .7;
    }
    78% {
      width: 40px;
      left: 110px;
      opacity: 1;
    }
    100% {width: 40px;}
  }
  @keyframes ball3{
    0% {
      width: 60px;
      left: 100px;
      opacity: .7;
    }
    3% {
      left: 110px;
      width: 40px;
      opacity: 1;
    }
    97% {
      width: 40px;
      left: 110px;
      opacity: 1;
    }
    100% {
      width: 60px;
      left: 100px;
      opacity: .7;
    }
  }
</style>